<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="J_chartBarBox" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// 导入echart
import echarts from 'echarts'
export default ({
  data () {
    return {
      chartBar: null,
      beginTime: '',
      endTime: '',
      mapList: [],
      xData: [],
      yData: [],
      btnDisabled: false
    }
  },
  mounted () {
    this.create()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartBar) {
      this.chartBar.resize()
    }
  },
  methods: {
    create () {
      this.getDataList()
      this.initChartBar()
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/question/question/countTypeQuestion'),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.mapList = data.mapList
          this.xData = []
          this.yData = []
          for (let j in this.mapList) { // {type:6,NUM:16,name:Java基础}
            this.xData.push(this.mapList[j].name)
            this.yData.push(this.mapList[j].num)
          }
          console.log(this.xData)
          console.log(this.yData)
          this.chartBar.resize()
          this.chartBar.setOption({
            xAxis: [
              {
                type: 'category',
                data: this.xData
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '题目数量',
                type: 'bar',
                data: this.yData
              }
            ]
          })
        } else {
          this.mapList = []
        }
      })
    },
    // 柱状图
    initChartBar () {
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['题目数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '题目数量',
            type: 'bar',
            data: this.yData
          }
        ]
      }
      this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
      this.chartBar.setOption(option)
      window.addEventListener('resize', () => {
        this.chartBar.resize()
      })
    }
  }
})
</script>
<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
  }
</style>
